<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">

    <ui:define name="content">

        <f:metadata>
            <f:viewParam name="aso" value="#{web.aso}" />
            <f:event type="preRenderView" listener="#{web.testFunc()}" />
        </f:metadata>

        <h:form>
            <p:messages id="messag" showDetail="true"  autoUpdate="true" closable="true" > 
                <p:effect type="fade" event="load" delay="#{gestorPrincipal.delayMessage}" />
            </p:messages>
            <p:panel header="Secciones">
                <p:panelGrid columns="2" style="border: 0px" styleClass="panelPrincipal">
                    <p:panel styleClass="view view-first">

                        <img src="resources/images/gallery-icon.png" />
                        <div class="mask">
                            <h2>Galería</h2>
                            <p>Fotos y videos</p>
                            <p:commandLink styleClass="info" value="Acceder" action="#{gestorPrincipal.paginaGaleriasRedir()}"/>
                        </div>

                    </p:panel>
                    <p:panel styleClass="view view-first">

                        <img src="resources/images/calendar_icon.png" />
                        <div class="mask">
                            <h2>Agenda</h2>
                            <p>Calendario de eventos de la escuela</p>

                            <p:commandLink styleClass="info" value="Acceder" action="#{gestorPrincipal.paginaAgendaRedir()}"/>
                        </div>

                    </p:panel>                
                    <p:panel styleClass="view view-first">

                        <img src="resources/images/directorio.png" />
                        <div class="mask">
                            <h2>Directorio</h2>
                            <p>Contactos pertenecientes a la escuela</p>
                            <p:commandLink styleClass="info" value="Acceder" action="#{gestorPrincipal.paginaDirectorioRedir()}"/>
                        </div>

                    </p:panel>   
                    <p:panel styleClass="view view-first">

                        <img src="resources/images/foros.png" />
                        <div class="mask">
                            <h2>Foros</h2>
                            <p>Publica tu opinión en los diferentes temas planteados</p>
                            <p:commandLink styleClass="info" value="Acceder" action="#{gestorPrincipal.paginaListaForoRedir()}"/>
                        </div>

                    </p:panel>                  
                </p:panelGrid>
            </p:panel>
            <br/>

            <p:commandButton value="asdf" actionListener="#{gestorUsuario.pruebaBoton()}" rendered="false"/>
           
        </h:form>
    </ui:define>
</ui:composition>
